<template>
  <div class="sessions-box">
    <div class="table-box">
      <el-table border :data="state.sesInfoArr" size="small" height="100%">
        <el-table-column prop="ccName" label="场次名称" align="center" show-overflow-tooltip="true" />
        <el-table-column prop="forecastTime" label="预报时间" align="center" show-overflow-tooltip="true" />
        <el-table-column prop="warmUpPeriod" label="预热期-天" align="center" show-overflow-tooltip="true" />
        <el-table-column prop="forecastPeriod" label="预热期-小时" align="center" show-overflow-tooltip="true" />

        <el-table-column label="计算开始/结束时间" width="140" show-overflow-tooltip="true">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span>{{ scope.row.startTime }}</span>
              <span style="margin-left: 10px">{{ scope.row.endTime }}</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
      <pagi-nation :pageSize="page.pageSize" :pageTotal="page.total" @pageFunc="pageFunc" class="page">
      </pagi-nation>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import floodcc008 from '@/assets/data/com_data/40501008_info.json'
import floodcc009 from '@/assets/data/com_data/40501009_info.json'
import pagiNation from '@/components/app-pagination/pagination.vue'
const state = reactive({
  sesInfoArr: []
})
const page = reactive({
  pageNum: 1, //当前页
  pageSize: 10, //每页条目数
  total: 1 // 记录总数
})
const changeData = (id, name) => {
  if (id === '40501008') {
    state.sesInfoArr = floodcc008.floodcc
  } else if (id === '40501009') {
    state.sesInfoArr = floodcc009.floodcc
  } else {
    state.sesInfoArr = []
  }
}
defineExpose({
  changeData
})
</script>

<style lang="less" scoped>
.sessions-box {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background-color: #fff;

  .table-box {
    height: calc(100% - 60px);
  }
  .page {
    margin-top: 10px;
    height: 40px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
